<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.d1,.d2,.d3{
				width: 200px;
				height: 200px;
				background-color: #000000;
				margin: 30px;
				margin-top: 5%;
				float: left;
			}
			.d1{
				margin-left: 30%;
			}
			.dd{
				margin-left: 45%;
			}
			.d4{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="dd"><button type="button">点击将div变为红色</button></div>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
		<script type="text/javascript">
			$(".dd").click(function(){
				for(var i = 1;i<4;i++){
					$(".d" + i).toggleClass("d4");
				}				
			})
		</script>
	</body>
</html>
